<template>
	<view class="recordListbg">
		<view class="pad30">
			<view class="cards" v-for="(it,i) in dataList" :key="i">
				<view class="flex-cb">
					<view>运输单号</view>
					<view>{{it.dispatchSn}}</view>
				</view>
				<view class="flex-cb marT20">
					<view>开始时间</view>
					<view class="color999">{{it.dispatchTimeStart||'-'}}</view>
				</view>
				<view class="flex-cb marT20">
					<view>完成时间</view>
					<view class="color999">{{it.dispatchTimeEnd||'-'}}</view>
				</view>
				<view class="flex-cb marT20">
					<view>煤运口令</view>
					<view class="color999">{{it.checkCode}}</view>
				</view>
				<view class="flex-cb marT20">
					<view>派单状态:</view>
					<view class="colorRed">{{ getDispatchStatusText(it.dispatchStatus) }}</view>
				</view>
				<view v-if="it.dispatchStatus===0" class="flex-cb marT20">
					<view></view>
					<view class="look bgGreen colorfff fontbold" @click.stop="orderPayWX(it)">
						去支付</view>
				</view>
				<view v-if="it.dispatchStatus===1||it.dispatchStatus===2" class="flex-cb marT20">
					<view></view>
					<view class="look bgMain colorfff fontbold" @click.stop="goRegister(it)">
						开始运输</view>
				</view>
				<!-- <view v-if="it.dispatchStatus===2" class="flex-cb marT20">
					<view></view>
					<view class="look bgMain colorfff fontbold" @click.stop="ditu(it)">
						查看轨迹</view>
				</view> -->
			</view>
			<view style="margin: 40rpx 0;">
				<u-loadmore :status="status" />
			</view>
		</view>
		<view class="btsView">
			<view class="bts bgMain colorfff" @tap.stop="submit">申请运输</view>
			<view class="safe-bottom"></view>
		</view>
	</view>
</template>

<script>
	import commonApi from '@/api/common.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loading',
				dataList: [],
				total: 0,
				data: {}
			}
		},
		onLoad(e) {
			this.data = JSON.parse(e.data)
			this.page = 1;
			this.status = 'loading';
			this.dataList = [];
			this.dispatchPage()
		},
		methods: {
			getDispatchStatusText(status) {
				switch (status) {
					case 0:
						return '待支付';
					case 1:
						return '待运输';
					case 2:
						return '运输中';
					case 3:
						return '已完成';
					default:
						return '';
				}
			},
			dispatchPage() {
				commonApi.dispatchPage({
					page: this.page,
					size: this.size,
					planId: this.data.planId
				}).then((res) => {
					if (res.status == 200) {
						let resOrderList = res.data.records;
						this.dataList = this.dataList.concat(resOrderList);
						this.total = res.data.total;
						if (resOrderList.length < this.size) {
							this.status = "nomore";
						}

					}
				});
			},
			submit() {
				uni.showModal({
					title: '提示',
					content: '确定要申请运输吗？',
					success: (res) => {
						if (res.confirm) {
							commonApi.dispatch(this.data.planId, this.data.id).then((res) => {
								if (res.status == 200) {
									this.page = 1;
									this.status = 'loading';
									this.dataList = [];
									this.dispatchPage()
								}
							});
						}
					}
				});
			},
			//微信小程序支付
			orderPayWX(item) {
				let that = this;
				commonApi.createDispatchOrder(item.id).then(res => {
					if (res.status == 200) {
						wx.requestPayment({
							timeStamp: res.data.payData.timeStamp,
							nonceStr: res.data.payData.nonceStr,
							package: 'prepay_id='+res.data.payData.prepayId,
							signType: res.data.payData.signType,
							paySign: res.data.payData.paySign,
							success: wxres => {
								that.showMsg(res.message)
								that.page = 1;
								that.status = 'loading';
								that.dataList = [];
								that.dispatchPage()
							},
							fail: err => {
								console.log(err)
								that.showMsg('支付失败', 'error');
							}
						})
					}else{
						that.showMsg(res.message)
					}
				})
			},

			goRegister(item) {
				item.origin = this.data.planDetail.origin;
				item.originLocation = this.data.planDetail.originLocation;
				item.destination = this.data.planDetail.destination;
				item.destinationLocation = this.data.planDetail.destinationLocation;
				let data = JSON.stringify(item)
				if (item.dispatchStatus == 2) {
					this.goToPage(`/pages/index/position?data=${data}`)
				} else {
					this.goToPage(`/pages/index/register?data=${data}`)
				}
			},

			ditu(item) {
				let data = {
					origin: this.data.planDetail.origin,
					originLocation: this.data.planDetail.originLocation,
					destination: this.data.planDetail.destination,
					destinationLocation: this.data.planDetail.destinationLocation,
					dispatchId: item.id,
				}
				this.goToPage(`/pages/mine/trajectory?data=${JSON.stringify(data)}`)
			}
		},
		onReachBottom() {
			if (this.status == 'nomore') {
				return;
			}
			this.page++;
			this.dispatchPage()
		},
	}
</script>

<style lang="scss" scoped>
	.recordListbg {
		width: 100%;
		min-height: 100%;

		.cards {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.paiche {
				border-radius: 50rpx;
				padding: 3rpx 15rpx;
				text-align: center;
			}

			.look {
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				text-align: center;
			}
		}
	}
</style>
